<template>
    <div>
        <MyTitle title="用户列表"></MyTitle>
        <SearchTable @reset="resetList" @search="todoSearch">
            <template #default="{ sobj }">
                <el-col :span="5" class="ml10">
                    <el-select v-model="sobj.role" size="middle" style="width:100%;" placeholder="请选择用户权限">
                        <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-col>
                <el-col :span="7" class="ml10">
                    <el-date-picker v-model="sobj.date" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" size="middle" style="width:100%" />
                </el-col>
            </template>
        </SearchTable>
        <el-row class="mt10">
            <el-col :span="23">
                <el-table :data="userList" stripe style="width: 100%" center border :row-key="(item) => item._id">
                    <el-table-column type="index" label="序号" width="60" align="center" />

                    <el-table-column label="用户名称" width="auto" align="center">
                        <template #default="scope">
                            <span> {{ scope.row.username }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="联系方式" width="auto" align="center">
                        <template #default="{ row }">
                            <div class="flex">
                                <span>{{ $filters.telformat(row.phone) }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="用户权限" width="100" align="center" sortable>
                        <template #default="scope" v-if="roleList">
                            <template v-if="roleList.find(item => item.value == scope.row.role)">
                                <el-tag :color="roleList.find(item => item.value == scope.row.role).color">
                                    {{ roleList.find(item => item.value == scope.row.role).label }}
                                </el-tag>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="用户头像" width="100" align="center">
                        <template #default="scope">
                            <el-avatar v-if="scope.row.avatar" :size="35"
                                :src="scope.row.avatar.replace(/public/, baseURL)"></el-avatar>
                            <el-avatar v-else :icon="UserFilled" :size="35"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column label="注册时间" width="220" align="center">
                        <template #default="scope">
                            <span> {{ $filters.timeFormat(scope.row.time, 'YYYY-MM-DD hh:mm') }}</span>
                        </template>
                    </el-table-column>


                    <el-table-column label="操作" width="auto" align="center" fixed="right">
                        <template #default="scope">
                            <template v-if="userInfo.role > scope.row.role">
                                <el-popconfirm title="你确定要删除吗???" @confirm="ToDoDelete(scope.row, scope.$index)">
                                    <template #reference>
                                        <el-button class='ml10' type="danger" size="small">删除</el-button>
                                    </template>
                                </el-popconfirm>
                                <el-button type="primary" size="small"
                                    @click="updateItem(scope.row, scope.$index)">修改</el-button>
                            </template>
                            <template v-else>
                                <span>级别不够</span>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>


                <div class="pagesize">
                    <el-pagination :page-sizes="[2, 4, 6, 8, 10, 15]" class="mt10" background
                        layout="sizes, total, prev, pager, next" :total="pageObj.total"
                        v-model:page-size="pageObj.pageSize" v-model:current-page="pageObj.pageNo"
                        @current-change="changeList" @size-change="handleSizeChange" />
                </div>
            </el-col>
        </el-row>
        <DiaLogForm ref="diaRef" title="修改用户" btn="修改用户" :rules="rules" @todoconfirm="todoconfirm">
            <template #default="{ form }">
                <el-form-item label="用户名称" prop="username">
                    <el-input clearable v-model="form.username" type="text" placeholder="请输入用户名称" autocomplete="off" />
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-input clearable v-model="form.phone" type="text" placeholder="请输入联系方式" autocomplete="off" />
                </el-form-item>
                <el-form-item label="用户角色" prop="role" v-if="userInfo">
                    <el-select v-model="form.role" size="middle" style="width:100%;" placeholder="请选择用户角色">
                        <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value"
                            v-show="userInfo.role > item.value" />
                    </el-select>
                </el-form-item>
            </template>
        </DiaLogForm>
    </div>
</template>

<script lang="ts" setup>
import { toRefs, onMounted, reactive, computed, ref, nextTick, watch, toRaw } from "vue";
import { useStore } from "../../store"
import { UserFilled } from '@element-plus/icons-vue'
import { baseURL } from "../../api/request";
import { Http } from "../../api/api";
import { reg } from "../../utils/validate";

const pageObj = reactive<any>({
    pageSize: 6,
    pageNo: 1,
    total: 0
})


const store = useStore()
const { userList, roleList } = toRefs(store)
const userInfo: any = computed(() => store.userInfo)
const diaRef = ref<any>()
const { getUserListAsync, getUserList } = store;
const searchObj = ref<any>({})
const resetList = () => {
    searchObj.value = {};
    getUserListAsync(pageObj, (total: any) => {
        pageObj.total = total
    })
}

const todoSearch = (data: any) => {
    console.log(data)
    searchObj.value = data;
    getUserListAsync({ ...toRaw(data), ...pageObj }, (total: any) => {
        pageObj.total = total
    })
}

const rules = reactive<any>({
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        {
            pattern: reg.phone,
            message: '手机号格式不正确'
        }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        {
            pattern: reg.pwd,
            message: '请输入6-16位数字加字母的密码'
        }
    ],
    role: [
        { required: true, message: '请选择用户权限', trigger: 'blur' },
    ],
})

const ToDoDelete = async (item: any, index: number) => {
    let res = await Http.deleteuser({ _id: item._id }) as any;
    if (res.code == 200) {
        store.userList.splice(index, 1)
        getUserList(store.userList)
    }
}

const updateItem = (item: any, index: number) => {
    diaRef.value.show = true;
    diaRef.value.form = Object.assign({}, item)
}

const todoconfirm = async (model: any) => {
    let res = await Http.updateuser(model) as any;
    if (res.code == 200) {
        console.log(model)
        let list = store.userList.map((item: any) => {
            if (item._id == model._id) {
                console.log(model)
                item = { ...toRaw(model) }
            }
            console.log(item)
            return item;
        })

        getUserList(list)

        diaRef.value.handleClose()
    }
}


watch(userList, (v) => {

})


const handleSizeChange = () => {
    pageObj.pageNo = 1;
    getUserListAsync({ ...toRaw(searchObj.value), ...toRaw(pageObj) }, (total: any) => {
        pageObj.total = total
    })
}


const changeList = (pageNo: any) => {
    console.log(pageNo)

    getUserListAsync({ ...toRaw(searchObj.value), ...toRaw(pageObj) }, (total: any) => {
        pageObj.total = total
    })
}

onMounted(() => {
    getUserListAsync(pageObj, (total: any) => {
        pageObj.total = total
    })
    nextTick()
})
</script>

<style lang="scss" scoped>
.pagesize {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
</style>
